﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport"	content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta content="telephone=no,email=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/base.css"/>
<link rel="stylesheet" type="text/css" href="<%=path %>/statics/css/my_style.css"/>
<script src="<%=path %>/statics/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="<%=path %>/statics/css/gg.css">
<link rel="stylesheet" href="<%=path %>/statics/css/list.css">
<script src="<%=path %>/statics/js/jquery-1.8.3.min.js"></script>
<script src="<%=path %>/statics/js/list.js"></script>
<script src="<%=path%>/statics/js/mui.min.js"></script>
<script src="<%=path%>/statics/js/swiper/swiper.jquery.min.js"></script> 
<title>商品列表页</title>
<script src="<%=path %>/statics/js/rem.js"></script>
<link href="<%=path %>/statics/iconfont/iconfont.css" rel="stylesheet">
<link href="<%=path %>/statics/css/mui.min.css" rel="stylesheet">
<link href="<%=path %>/statics/css/all.css" rel="stylesheet">
<style>
	.more{overflow: hidden;padding:10px;text-align: center;}
	.more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#fc605a;text-align:center;border-radius:3px;}
	.more a:hover{text-decoration: none;background: #fc605a;color: #fff;}
	
</style>
</head>
<script type="text/javascript">
	var start1=0;
	var size1=4;
	
	var start2=0;
	var size2=4;
	
	var start3=0;
	var size3=4;
	
	var start4=0;
	var size4=4;
	
	$(function() {
		var banner = new Swiper('.banner', {
			autoplay : 5000,
			pagination : '.swiper-pagination',
			paginationClickable : true,
			lazyLoading : true,
			loop : true
		});

		mui('.pop-schwrap .sch-input').input();
		var deceleration = mui.os.ios ? 0.003 : 0.0009;
		mui('.pop-schwrap .scroll-wrap').scroll({
			bounce : true,
			indicators : true,
			deceleration : deceleration
		});
		$('.top-sch-box .fdj,.top-sch-box .sch-txt,.pop-schwrap .btn-back').on(
				'click', function() {
					$('html,body').toggleClass('holding');
					$('.pop-schwrap').toggleClass('on');
					if ($('.pop-schwrap').hasClass('on')) {
						;
						$('.pop-schwrap .sch-input').focus();
					}
			});
		
		/*  $(window).scroll(function () { 
		       var scrollTop = $(this).scrollTop();  
		       var scrollHeight = $(document).height();  
		       var windowHeight = $(this).height();  
		       if (scrollTop + windowHeight == scrollHeight) {  
		          
		       }  
		   }); */   
	});
	
	//获取当前根目录
	function getRootPath() {
		//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
		var curWwwPath = window.document.location.href;
		//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
		var pathName = window.document.location.pathname;
		var pos = curWwwPath.indexOf(pathName);
		//获取主机地址，如： http://localhost:8083
		var localhostPaht = curWwwPath.substring(0, pos);
		//获取带"/"的项目名，如：/uimcardprj
		var projectName = pathName.substring(0,
				pathName.substr(1).indexOf('/') + 1);
		return (localhostPaht + projectName);
	}

	function look() {
		var nr = $("#nr").val();
		if (nr == "") {
			location.href = getRootPath() + "/product/ription.html?nr=女";
		} else {
			location.href = getRootPath() + "/product/ription.html?nr=" + nr;
		}
	}
	
	function  tongYong2(num){
		$("#onebtn").css("display","none");
		$("#twobtn").css("display","none");
		$("#threebtn").css("display","none");
		$("#fourbtn").css("display","none");
		$("#"+num+"btn").css("display","block");
	}
	 
	function tongYong(register,one,two){
		var listProduct=$("#lsnr");
		var cot1=$("#cot").val();
		var concatName=$("#concatName").val();
		  $.ajax({
			type:"GET",
			url:getRootPath()+"/product/"+register+"?concatName="+concatName+"&one="+one+"&two="+two,
			dataType:"json",
			success:function(sdata){
				var productC="";
				listProduct.html("");
				 for(var i=0;i<sdata.length;i++){
					productC+="<a href=\""+getRootPath()+"/product/detail/"+sdata[i].id+"\">";
					productC+="<div class=\"collection\">";
					productC+="<div class=\"hide\"></div>"; 
					productC+="<div class=\"image\"><img style='width: 100%;height: 100%;' src=\""+getRootPath()+"/statics/files/"+sdata[i].fileName+"\"/></div>";
					productC+="<p>【"+sdata[i].name+"】</p>";
					productC+="<p>"+sdata[i].description+"</p>";
					productC+="<p>￥"+sdata[i].price+"</p>";
					productC+="</div>";
					productC+="</a>";
				} 
				
				productC+="<div class=\"more\" id=\"onebtn\"><a href=\"javascript:;\" onClick=\"addNumOne();\">加载更多</a></div>"+
						"<div class=\"more\"  style=\"display: none;\" id=\"twobtn\"><a href=\"javascript:;\" onClick=\"addNumTwo();\">加载更多</a></div>"+
						"<div class=\"more\"  style=\"display: none;\" id=\"threebtn\"><a href=\"javascript:;\" onClick=\"addNumThree();\">加载更多</a></div>"+
						"<div class=\"more\"  style=\"display: none;\" id=\"fourbtn\"><a href=\"javascript:;\" onClick=\"addNumFour();\">加载更多</a></div>";
			
				listProduct.html(productC);
				 if(register=="zhProduct"){
					tongYong2("one");
				}
				if(register=="newproduct"){
					tongYong2("two");
				}
				if(register=="height"){
					tongYong2("three");
				}
				if(register=="low"){
					tongYong2("four");
				} 
				if(cot1==sdata.length){
					if(register=="zhProduct"){
						size1=4;
						$("#onebtn").hide();
					}
					if(register=="newproduct"){
						size2=4;
						$("#twobtn").hide();
					}
					if(register=="height"){
						size3=4;
						$("#threebtn").hide();
					}
					if(register=="low"){
						size4=4;
						$("#fourbtn").hide();
					}
				}
			} 
		});   
	}
	
	function addNumThree(){
		size3=size3+4;
		up();
	}
	/* 价格从高到低 */
	function up(){
		tongYong2("three");
		tongYong("height",start3,size3);
	}
	
	function addNumFour(){
		size4=size4+4;
		down();
	}
	/* 价格从低到高 */
	function down(){
		tongYong2("four");
		tongYong("low",start4,size4);
	}
	
	/* 分类 */
	function fl(){
		var typeName=$("#typeName");
		$.ajax({
			type:"GET",
			url:getRootPath()+"/type/getTypeList",
			dataType:"json",
			success:function(data){
				typeName.html("");
				var lis="<li class=\"category_list_item\">全部</li>";
				for(var i=0;i<data.length;i++){
					lis+="<a href=\""+getRootPath()+"/product/serachById.html?typeid="+data[i].typeId+"\" ><li class=\"category_list_item\" id=\"liS\" >"+data[i].typeName+"</li></a>";
				}
				typeName.html(lis);
			}
		});
	}
	
	
	function addNumOne(){
		size1=size1+4;
		zonghe();
	}
	/* 综合 */
	function zonghe(){
		tongYong2("one"); 
		tongYong("zhProduct",start1,size1);
	}
	
	function addNumTwo(){
		size2=size2+4;
		xp();
	}
	/* 新品 */
	function xp(){
		tongYong2("two");
		tongYong("newproduct",start2,size2);  
	}
	
	/* 价格0-100 */
	function one(){
		$("#jg").val("one");
	}
	
	/* 价格100-499 */
	function two(){
		$("#jg").val("two");
	}
	
	//确定
	function sure(){
		var jg=$("#jg").val();
		tongYong(jg);
	}
	
	/* 价格>500 */
	function three(){
		$("#jg").val("three");
	}

	
</script>
<body>
	<div class="jd_container">
		<!-- 顶部 -->
		<li class="category_list_item" onclick="">全部</li>
		<header class="mui-bar mui-bar-nav" id="header">
		<img width="6%" onclick="location.href='<%=path%>/index.html'"   src="<%=path%>/statics/images/icon_left.png"/>
		
			<div class="top-sch-box flex-col">
				
				<div class="centerflex">
					<i class="fdj iconfont "><img src="<%=path%>/statics/images/sousuo.png"></i>
					<div class="sch-txt">属于你的女人味儿</div>
					<span class="shaomiao"><i class="iconfont icon-saoma" onclick="back()"></i></span>
				</div>
				 <img src="<%=path%>/statics/images/i-cart-active.png" onclick="location.href='<%=path %>/trolley/sys/shopcar.html'" style="width: 12%; margin-left:8.1rem ;margin-top:-3rem ;    margin-bottom: 0.65rem;">
			</div>
			<a class="btn" > <i class="iconfont "></i>
			</a> <a class="btn" > <i
				class="iconfont "></i>
			</a>
		</header>
	
		
		<div class="pop-schwrap">
			<div class="ui-scrollview">
				<div class="mui-bar mui-bar-nav clone">
					<a class="btn btn-back" href="javascript:;"></a>
					<div class="top-sch-box flex-col">
						<div class="centerflex">
							<input class="sch-input mui-input-clear" type="text"
								name="productName" id="nr" placeholder="连衣裙就是你的女人味儿" />
						</div>
					</div>

					<a class="mui-btn mui-btn-primary sch-submit" id="suress"
						onclick="look()">搜索</a>
				</div>
				<!-- 加载完数据后隐藏显示更多按钮 -->
				<input type="hidden" name="cot" id="cot" value="${cot }"/>
				<!-- 记录用户输入的关键字/没有输入进来默认的关键字 -->
				<input type="hidden" name="concatName" id="concatName" value="${concatName }"/>
				<div class="scroll-wrap">
					<div class="mui-scroll">
						<div class="sch-cont">
							<div class="section ui-border-b">
								<div class="tit">
									<i class="iconfont icon-hot"></i>热门搜索
								</div>
								<div class="tags">
									<c:forEach var="hot" items="${hotList }">
										<a href="<%=path %>/product/ription.html?nr=${hot.name }" class="tag">${hot.name }</a>
									</c:forEach>
								</div>
							</div>
							<div class="section">
								<div class="tit">
									<i class="iconfont icon-time"></i>最近搜索
								</div>
								<div class="tags" id="ylh">
									<!-- <span class="tag">外套</span><span class="tag">连衣裙</span><span
										class="tag">运动鞋</span><span class="tag">睡衣</span> <span
										class="tag">外套</span><span class="tag">连衣裙</span><span
										class="tag">运动鞋</span><span class="tag">睡衣</span> <span
										class="tag">外套</span><span class="tag">连衣裙</span><span
										class="tag">运动鞋</span> -->
								</div>
							</div>
						</div>
						<div class="sch-clear">
							<a href="javascript:void"><i class="iconfont icon-shanchu"></i>清除搜索历史</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="navbar" style="margin-top: 25px">
			<a href="javascript:void(0);" class="p_order active" onclick="zonghe()">综合</a>
			<a href="javascript:void(0);" class="uptime" onclick="xp()">新品</a>
			<a href="javascript:void(0);" class="price">
				<div class="sort">
					<div class="sort_up" id="up" onclick="up()"></div>
					<div class="sort_down" id="down" onclick="down()"></div>
				</div> 价格
			</a> <a href="javascript:void(0)" class="filter">筛选</a>
		</div>
		<!--——————右侧栏——————-->
		<div class="side_right">
			<div class="one">
				<div class="navbar_right">
					<a href="#" class="close lf">关闭</a>
					<p>筛选</p>
					<a href="#" class="ok rf" onclick="sure()">确定</a>
				</div>
				<div class="condition">
					<ul>
						<li class="fl" id="lookfl" onclick="fl()">分类
							<div class="rf">
								<span>全部</span>
							</div>
						</li>
						<li class="jg">价格
							<div class="rf">
								<span>全部</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="one_one">
				<div class="top">
					<a href="javascript:history.back()" class="to_one lf"></a> <span>全部分类</span>
				</div>
				<ul class="category_list" id="typeName">
				
				</ul>
			</div>
			<div class="one_two">
				<div class="top">
					<a href="javascript:history.back()" class="to_one lf"></a> <span>价格</span>
				</div>
				<ul>
					<li>全部</li>
					<input type="hidden" id="jg" value=""/>
					<li onclick="one()">0-99</li>
					<li onclick="two()">100-499</li>
					<li onclick="three()">500以上</li>
				</ul>
			</div>
		</div>
		<div class="list_show" id="ls">
			<div class="content" id="lsnr">
				<c:forEach var="img" items="${proList }">
				<a href="<%=path %>/product/detail/${img.id }">						
					<div class="collection">
							<div class="hide"></div>
						<div class="image" >
							<img style="width: 100%;height: 100%;" src="<%=path %>/statics/files/${img.fileName}" />
						</div>  
						<p>【${img.name }】</p>
						<p>${img.description }</p>
						<p>￥${img.price }</p>
					</div>
				</a>
				</c:forEach>
				<c:if test="${cot>4 }"><div class="more" id="onebtn"><a href="javascript:;" onClick="addNumOne();">加载更多</a></div>
				<div class="more"  style="display: none;" id="twobtn"><a href="javascript:;" onClick="addNumTwo();">加载更多</a></div>
				<div class="more"  style="display: none;" id="threebtn"><a href="javascript:;" onClick="addNumThree();">加载更多</a></div>
				<div class="more"  style="display: none;" id="fourbtn"><a href="javascript:;" onClick="addNumFour();">加载更多</a></div></c:if>
			</div>	
		
	</div>
		<div class="none">
			<img src="<%=path%>/statics/images/none.png" alt="">
			<p>没有您要找的商品哦</p>
			<p>再搜搜其他商品吧</p>
		</div>
		
</body>
</html>
